<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<ui:composition template="/layouts/default.xhtml">
	<ui:define name="title">#{text['paiementDetail.title']}</ui:define>
	<ui:param name="menu" value="EleveMenu" />
	<ui:param name="menuleft" value="PaiementFormMenu" />
	<ui:param name="menudetailtop" value="PaiementFormMenu" />
	<ui:param name="menudetaileleve" value="EleveDetailMenu"/>
	<ui:param name="menudetail" value="EleveDetailMenu"/>

	<ui:define name="body">
		<c:set var="delObject" value="#{text['paiementList.paiement']}" />
		<script type="text/javascript">var msgDelConfirm =
           "<h:outputFormat value="#{text['delete.confirm']}"><f:param value="#{delObject}" /></h:outputFormat>";
        </script>
		<div class="col-sm-12">
			<ui:include src="/common/eleve-detail-top.xhtml"/>
			<h:form id="paiementForm">
					<div class="col-sm-12">
						<div class="row">
							<div class="form-group">
								<h:inputHidden value="#{paiementController.paiement.id}" id="id" />
								<h:inputHidden value="#{paiementController.paiement.eleve.id}" id="idEleve" />
								<h:inputHidden value="#{paiementController.from}" id="from" />
							</div>
							
			        		<div class="page-header">
			        			<div class="row">
			        				<div class="col-sm-6">
										<h3>
											<c:choose>
												<c:when test="#{paiementController.edit}">
													#{text['paiementDetail.message.edit']}
												</c:when>
												<c:otherwise>
													#{text['paiementDetail.message']}:
												</c:otherwise>
											</c:choose>
											<strong><h:outputText value="#{paiementController.eleve.fullName}" escape="true"/></strong>
										</h3>
									</div>
									<div class="col-sm-6 text-right">
										<div class="btn-group">
											<c:choose>
												<c:when test="#{paiementController.edit}">
													<h:commandButton value="#{text['button.edit']}" action="#{paiementController.save}" id="savetop" styleClass="btn btn-primary" />
												</c:when>
												<c:otherwise>
													<h:commandButton value="#{text['button.save']}" action="#{paiementController.save}" id="savetop" styleClass="btn btn-primary" />
												</c:otherwise>
											</c:choose>
										</div>
									</div>
								</div>
							</div>  
						</div>
						<div class="row">
							<div class="col-sm-4 form-group">
								<h:outputLabel styleClass="control-label" for="datePaiement" value="#{text['paiement.datePaiement']}" /><br/>
								<p:calendar value="#{paiementController.paiement.datePaiement}" required="true" placeholder="jj/mm/yyyy" rendered="true" locale="fr" navigator="true" maxdate="now" id="datePaiement" showOn="button" pattern="#{text['date.format']}" />
								<p:message for="datePaiement" />
							</div>
							<div class="col-sm-4 form-group">
								<c:choose>
									<c:when test="${paiementController.edit}">
										<h:outputLabel styleClass="control-label" for="moisPayeEdit" value="#{text['paiement.moisPaye']}" /><br/>
										<h:outputText id="moisPayeEdit" value="#{paiementController.paiement.moisPaye.libelle}" escape="true"/>
							        </c:when>
							        <c:otherwise>
							        	<h:outputLabel styleClass="control-label" for="moisPaye" value="#{text['paiement.moisPaye']}" /><br/>
										<p:selectCheckboxMenu id="moisPaye" label="#{text['paiement.moisPaye']}" style="width:220px;" value="#{paiementController.moisSelecteds}" panelStyle="width:220px">  
								            <f:selectItems value="#{paiementController.moisAPayes}"/>
								            <p:ajax process="@this" event="change" update="reste,avanceApaye" listener="#{paiementController.handleAvanceChange}"/>
								            <p:ajax process="@this" event="toggleSelect" update="reste,avanceApaye" listener="#{paiementController.handleToggleMoisSelected}"/>
								        </p:selectCheckboxMenu> 
								        <p:message for="moisPaye" />
							        </c:otherwise>
							   </c:choose>
						    </div>
						</div>
							
						<div class="row">
							<div class="col-sm-2 form-group">
								<h:outputLabel styleClass="control-label" for="avance" value="#{text['paiement.avance']}" />
								<h:inputText id="avance" validatorMessage="#{text['errors.avance.min']}" value="#{paiementController.paiement.avance}" style="text-align: center;" styleClass="form-control" required="false" maxlength="255">
									<f:validateDoubleRange minimum="1.0"/> 
									<p:ajax  partialSubmit="true" update="reste" event="blur" listener="#{paiementController.handleAvanceChange}"/> 
								</h:inputText>
								<p:message for="avance" />
							</div>
							
							<div class="col-sm-2 form-group">
								<h:outputLabel styleClass="control-label" for="reste" value="#{text['paiement.reste']}" />
								<h:inputText id="reste" readonly="true" value="#{paiementController.paiement.reste}" style="text-align: center;" styleClass="form-control" required="false"/>
							</div>
							
							<div class="col-sm-8 form-group">
									<H3>#{text['paiement.avanceToPaye']} : <B><h:outputText id="avanceApaye" value="#{paiementController.montantAPaye}" styleClass="control-label" escape="true" /></B></H3>
							</div>
						</div>
						
						<div class="row">
							<div class="col-sm-4 form-group">
								<h:outputLabel styleClass="control-label" for="modePaiement" value="#{text['paiement.modePaiement']}" />
								<h:selectOneMenu id="modePaiement" styleClass="form-control" value="#{paiementController.paiement.modePaiement.id}">
									<f:selectItems value="#{paiementController.modePaiements}" var="modePaiement" itemLabel="#{modePaiement.libelle}" itemValue="#{modePaiement.id}" />
									<p:ajax process="@form" update="@form"/> 
								</h:selectOneMenu>
								<p:message for="modePaiement" />
							</div>
							
							<div class="col-sm-4 form-group">
								<h:outputLabel styleClass="control-label"  rendered="#{paiementController.showNumeroCheque}" for="numeroCheque" value="#{text['paiement.numeroCheque']}" />
								<p:inputText id="numeroCheque" rendered="#{paiementController.showNumeroCheque}" value="#{paiementController.paiement.numeroCheque}" styleClass="form-control" required="false" maxlength="30" />
								<p:message for="numeroCheque" />
							</div>
						</div>
						
						<div class="row">
					      	<div class="col-sm-6 form-group">
								<h:outputLabel styleClass="control-label" for="avanceJustifie" value="#{text['paiement.avanceJustifie']}" /><br/>
								<p:selectBooleanCheckbox id="avanceJustifie" value="#{paiementController.paiement.avanceJustifie}"/>
					      	</div>
	        			</div>
	        			
	        			<div class="row">
					      	<div class="col-sm-6 form-group">
								<h:outputLabel styleClass="control-label" for="descriptionAvanceJustifie" value="#{text['paiement.description']}" /><br/>
								<h:inputTextarea rows="2" id="descriptionAvanceJustifie" value="#{paiementController.paiement.descriptionAvanceJustifie}" styleClass="form-control" required="false" maxlength="255" />
								<p:message for="descriptionAvanceJustifie" />
					      	</div>
	        			</div>
						
					</div>	
					<div class="text-right">
						<div class="btn-group">
							<c:choose>
								<c:when test="#{paiementController.edit}">
									<h:commandButton value="#{text['button.edit']}" action="#{paiementController.save}" id="save" styleClass="btn btn-primary" />
								</c:when>
								<c:otherwise>
									<h:commandButton value="#{text['button.save']}" action="#{paiementController.save}" id="save" styleClass="btn btn-primary" />
								</c:otherwise>
							</c:choose>
						</div>
					</div>
			</h:form>
		</div>
	</ui:define>
</ui:composition>
</html>